{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>慕旅游网-后台管理</title>

  <!-- Bootstrap -->
  <link href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="{% static 'plugins/html5shiv.min.js' %}"></script>
  <script src="{% static 'plugins/respond.min.js' %}"></script>
  <![endif]-->

  <link rel="stylesheet" href="{% static 'style/index.css' %}">
</head>

<body class="layout page-home" id="top">

<div class="container-fluid">
  <div class="layout-left"></div>
  <div class="layout-right">
    <!-- 数据统计 -->
    <div class="panel-info">

      <h3>数据统计</h3>
      <div class="row">
        <div class="col-md-3">
          <div class="widget-card card__blue am-cf">
            <div class="card-header">景点总数</div>
            <div class="card-body">
              <div class="card-value">{{ total_stats.sight_count }}</div>
              <div class="card-description">当前景点总数量</div>
              <span class="card-icon glyphicon glyphicon-flag"></span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-card card__primary am-cf">
            <div class="card-header">评价总数</div>
            <div class="card-body">
              <div class="card-value">{{ total_stats.comment_count }}</div>
              <div class="card-description">景点评价总数</div>
              <span class="card-icon glyphicon glyphicon-comment"></span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-card card__red am-cf">
            <div class="card-header">用户总量</div>
            <div class="card-body">
              <div class="card-value">{{ total_stats.user_count }}</div>
              <div class="card-description">当前用户总数量</div>
              <span class="card-icon glyphicon glyphicon-user"></span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-card card__violet am-cf">
            <div class="card-header">订单总量</div>
            <div class="card-body">
              <div class="card-value">{{ total_stats.order_count }}</div>
              <div class="card-description">已付款订单总数量</div>
              <span class="card-icon glyphicon glyphicon-jpy"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-info">
      <h3>实时数据</h3>
      <div class="row">
        <div class="col-md-3">
          <div class="widget-outline dis-flex flex-y-center">
            <div class="outline-left">
              <i class="glyphicon glyphicon-jpy"></i>
            </div>
            <div class="outline-right dis-flex flex-dir-column flex-x-between">
              <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">销售额(元)</div>
              <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">{{ now_stats.order_amount|default_if_none:0 }}</div>
              <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                昨日：{{ yesterday_stats.order_amount|default_if_none:0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-outline dis-flex flex-y-center">
            <div class="outline-left">
              <i class="glyphicon glyphicon-ok"></i>
            </div>
            <div class="outline-right dis-flex flex-dir-column flex-x-between">
              <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">支付订单数</div>
              <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">{{ now_stats.order_count }}</div>
              <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                昨日：{{ yesterday_stats.order_count }}
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-outline dis-flex flex-y-center">
            <div class="outline-left">
              <i class="glyphicon glyphicon-user"></i>
            </div>
            <div class="outline-right dis-flex flex-dir-column flex-x-between">
              <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">新增用户数</div>
              <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">{{ now_stats.user_add_count }}</div>
              <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                昨日：{{ yesterday_stats.user_add_count }}
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="widget-outline dis-flex flex-y-center">
            <div class="outline-left">
              <i class="glyphicon glyphicon-tags"></i>
            </div>
            <div class="outline-right dis-flex flex-dir-column flex-x-between">
              <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">下单用户数</div>
              <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">{{ now_stats.order_user_count }}</div>
              <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                昨日：{{ yesterday_stats.order_user_count }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-info">
      <h3>数据走势</h3>
      <div class="row">
        <div class="col-md-6">
          <div id="dayCount" class="widget-echarts"></div>
        </div>
        <div class="col-md-6">
          <div id="dayAmount" class="widget-echarts"></div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="{% static 'plugins/jquery-3.4.1.min.js' %}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/echarts.min.js' %}"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var dayCount = echarts.init(document.getElementById('dayCount'));

    // 指定图表的配置项和数据
    var dayCountOpts = {
        title: {
            text: '近七日订单数量增长趋势'
        },
        xAxis: {
            type: 'category',
            data: {{ latest_stats.date|safe }}
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: {{ latest_stats.count }},
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    dayCount.setOption(dayCountOpts);


    // 基于准备好的dom，初始化echarts实例
    var dayAmount = echarts.init(document.getElementById('dayAmount'));

    // 指定图表的配置项和数据
    var dayAmountOpts = {
        title: {
            text: '近七日订单总额'
        },
        tooltip: {},
        legend: {
            data: ['金额']
        },
        xAxis: {
            data: {{ latest_stats.date|safe }}
        },
        yAxis: {},
        series: [{
            name: '金额',
            type: 'bar',
            data: {{ latest_stats.amount }}
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    dayAmount.setOption(dayAmountOpts);
</script>
</body>

</html>